<template>
    <el-form ref="form" :model="item" v-if="item.tpl" label-width="100px" size="mini">
        <el-form-item label="图片">
            <el-upload
                class="avatar-uploader"
                action="/mgr/api/common/fileupload"
                :show-file-list="false"
                :on-success="handleImageSuccess"
                :before-upload="beforeImageUpload">
                <img v-if="item.module_data1"
                     :src="item.module_data1" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-form-item>
        <el-form-item label="名称">
            <el-input v-model="item.module_data2"></el-input>
        </el-form-item>
        <el-form-item label="描述">
            <el-input v-model="item.module_data3"></el-input>
        </el-form-item>
    </el-form>
</template>

<script type="text/javascript">

    import { mapState, mapActions } from 'vuex';

    export default {
        props: [ 'item'],
        data () {
            return {}
        },
        mounted: function () {},
        components: {

        },
        watch: {},
        computed: mapState([

        ]),
        methods: {
            ...mapActions([
            ]),
            handleImageSuccess(res, file) {
                this.item.module_data1 = res.data;
            },
            beforeImageUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isGtMax = file.size / 1024 / 1024 > 2;

                /*if (!isJPG) {
                 this.$message.error('上传头像图片只能是 JPG 格式!');
                 }*/
                if (isGtMax) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return !isGtMax;
            }
        }
    }
</script>
